<template>
  <div>
    <!-- 表格工具栏 -->
    <div class="ele-table-tool">
      <div class="ele-table-tool-title">漏洞列表</div>
      <div class="ele-table-tool-right">
        <el-button
          v-if="showBtn"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="edit"
        >添加
        </el-button>
      </div>
    </div>
    <!-- 数据表格 -->
    <ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
      <template slot-scope="{}">
        <el-table-column
          prop="name"
          label="漏洞名称"
          show-overflow-tooltip
          min-width="110"
        />
        <el-table-column
          prop="asset"
          label="所属资产"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{ row.asset.name }}</template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="漏洞等级"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{ row.level.name }}</template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="漏洞状态"
          show-overflow-tooltip
          min-width="135"
        />
        <el-table-column
          prop="source"
          label="漏洞来源"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{ row.source.name }}</template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="漏洞类型"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{ row.type.name }}</template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{
            row.create_time
          }}</template>
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          show-overflow-tooltip
          min-width="135"
        >
          <template slot-scope="{ row }">{{
            row.update_time
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          min-width="160"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-popconfirm
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <el-link
                slot="reference"
                icon="el-icon-delete"
                type="primary"
                :underline="false"
              >删除</el-link>
            </el-popconfirm>

            <el-link
              icon="el-icon-finished"
              type="primary"
              :underline="false"
              @click="jump(scope.row)"
            >详情
            </el-link>
            <el-link
              icon="el-icon-share"
              type="primary"
              :underline="false"
              @click="share(scope.row)"
            >分享
            </el-link>
          </template>
        </el-table-column>
      </template>
    </ele-data-table>
  </div>
</template>

<script>
export default {
  name: 'VulnListTable',
  props: {
    params: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      choose: []
    }
  },
  computed: {
    table() {
      return {
        url: this.url,
        where: {}
      }
    }
  },
  watch: {
    params(newValue) {
      this.table.where = { key: newValue }
      this.$refs.table.reload()
    }
  },
  methods: {
    /* 删除漏洞 */
    del(id) {
      this.$http.get(`/vuln/vuln/delete/${id}/`).then(res => {
        if (res.data.code === 0) {
          this.$message({ type: 'success', message: '删除成功' })
          this.$refs.table.reload()
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
    },
    /* 编辑资产 */
    edit(row) {
      this.$router.push('/vuln/create/')
    },
    reload() {
      this.table.where = {}
      this.$refs.table.reload()
    },
    /* 跳转到资产详情 */
    jump(row) {
      this.$router.push(`/vuln/detial/${row.ticket_id}`)
    },
    share(row) {
      console.log(this.$route)
      this.$http.get(`/workflow/share/create/${row.ticket_id}/`).then(res => {
        if (res.data.code === 0) {
          this.$alert(`路由地址为：/share?key=${res.data.data}`, '分享链接', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            callback: action => {
              if (action === 'confirm') {
                this.$router.push(`/share?key=${res.data.data}`)
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
